<script>
  import { setContext, getContext } from 'svelte'

  import CoursesList from '@lib/CoursesList.svelte'
  import courses from '@/store'
  console.log('cccc', courses)
  // import coursesData from '@/data/courses'
  // let courses = [...coursesData]
  $: total = $courses.reduce((total, it) => (total += it.amount), 0)

  const test = getContext('test')

  const removeCourse = id => {
    $courses = $courses.filter(course => course.id !== id)
  }
  setContext('rm', removeCourse)
  const handleClear = () => {
    $courses = []
  }
</script>

<section>
  <CoursesList courses={$courses} , {total} />

  {#if courses.length > 0}
    <button class="btn btn-primary btn-block" on:click={handleClear}> 清除所有 </button>
  {/if}
</section>
